<template>
  <div class="conten">
    <div class="title">{{ data.title }}第{{ data.chapter_num }}集</div>
    <el-form
      ref="form"
      :rules="rules"
      :model="formData"
      label-position="top"
      label-width="80px"
      class="form"
    >
      <el-form-item
        label="媒体"
        prop="media_id"
      >
        <el-select
          v-model="formData.media_id"
          clearable
          placeholder="请选择"
          style="width: 250px"
        >
          <el-option
            v-for="item in optionsList.medialist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          > </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="账户"
        prop="advertiser"
      >
        <el-select
          ref="select"
          v-model="formData.advertiser"
          style="width: 250px"
          value-key="advertiser_id"
          filterable
          remote
          clearable
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
          @focus="mobileClear"
          @hook:mounted="mobileClear"
          @visible-change="mobileClear"
        >
          <el-option
            v-for="item in optionsList.advertiserList"
            :key="item.advertiser_id"
            :label="item.advertiser_name"
            :value="item"
          > </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="渠道名称"
        prop="channel_name"
      >
        <el-input
          v-model="formData.channel_name"
          clearable
          style="width: 250px"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { POST_mini_app_playlet_promotionalLinks } from '@/api/appContent/theater'
import { commonData } from '@/api/common'
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        media_id: '',
        mini_app_id: window.localStorage.getItem('mini_app_id'),
        playlet_id: '',
        chapter_id: '',
        channel_name: '',
        advertiser: ''
      },
      advertiser: {},
      title: '',
      optionsList: {
        playletList: [],
        medialist: [],
        advertiserList: []
      },
      rules: {
        playlet_id: [{ required: true, message: '请选择短剧', trigger: 'blur' }],
        channel_name: [{ required: true, message: '请输入', trigger: 'blur' }],
        advertiser: [{ required: true, message: '请输入', trigger: 'blur' }],
        media_id: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    console.log(this.data)
    this.onGetMediaList()
  },
  methods: {
    close() {
      this.$emit('cancel')
    },
    async onSubmit() {
      //  this.formData = Object.assign(this.advertiser, this.formData)

      this.loading = true
      const params = {
        ...this.formData,
        ...this.formData.advertiser,
        ...this.data,
        advertiser: null
      }

      this.$refs.form.validate((valid) => {
        if (valid) {
          POST_mini_app_playlet_promotionalLinks(params).then((res) => {
            if (res.status_code === 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.loading = false

      // this.formData = { ...this.formData, ...this.advertiser, ...this.data }
      // let res = await POST_mini_app_playlet_promotionalLinks(this.formData)
      // if (res.status_code == 1) {
      //   this.$message.success(res.msg)
      //   this.$emit('ok')
      // }
    },
    async onGetMediaList() {
      const res = await commonData({
        type: 'media'
      })
      if (res.status_code === 1) {
        this.optionsList.medialist = res.data.data
        if (res.data.data.length > 0) {
          this.formData.media_id = res.data.data[0].value
        }
      }
    },
    async remoteMethod(query) {
      this.loading = true
      if (!this.formData.media_id !== '') {
        const res = await commonData({
          type: 'advertiserList',
          value: query,
          mini_app_id: window.localStorage.getItem('mini_app_id'),
          media: this.formData.media_id
        })
        console.log(res, 'res')
        if (res.status_code === 1) {
          this.optionsList.advertiserList = res.data.data
        }
        this.loading = false
      }
    },
    onAdvertiserChange(value) {},
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.conten {
  width: 100%;
   ::v-deep .el-form-item__label{
    font-weight: 600;
  }
  .contentMain {
    // padding: 20px;
  }
  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
    margin-bottom: 10px;
    padding-top: 30px;
  }
  .form {
    padding: 40px;
  }
}
</style>